<template>
  <div>
    <header-com></header-com>
    个人中心
    <h1>{{msg}}</h1>
    <button @click="change" >改变</button>
    <button @clikc="say">加加加</button>
    <div id="boxs">大小</div>
  </div>
</template>

<script>
import {_getHomeList,getDetail,getGoods} from '../api/home'
export default {
  name: '2209vueMine',

  data() {
    return {
      msg:"今天星期五",
      num:1
    };
  },

beforeCreate() {
    console.log("实例创建前")
},
 created(){
     console.log("实例创建后")
    //  找到一个轮播图插件 渲染轮播图数据
    _getHomeList('index').then(res=>{
        console.log(res)
    })
    getGoods({
      page:1,
      pageSize:6
    }).then(res=>{
      console.log(res,"888888888888")
    })
    getDetail(1704377).then(res=>{
      console.log(res,"------")
    })
 },
  beforeMount() { //vue实例挂载前
    console.log(" //vue实例挂载前") 
    // 可以操作data和methods 不能操作dom
    // 本声明周期 组件的实力即将开始挂载了，但不确定挂载完成

  },
  mounted() { //vue组件的挂载后
     console.log(" //vue实例挂载后")
    // 可以操作data和methods 
    // 可以操作dom
    // 应用场景： 初始化一些插件 可以放在mouted
    // vue进入一个组件 默认会触发beforeCreate created
    // beforeMount mounted
  },
  beforeUpdate() { //vue实例更新前
    // vue的更新前和更新后生命周期是在
    // 改变数据并引起页面的渲染变化 才会触发
    // 应用场景：触发更新时候，可以从新初始化本组件的一些函数
      console.log("//vue实例更新前")
      
  },
  updated() { //vue实例更新后
     console.log("//vue实例更新后")
  },
  beforeDestroy() { //vue组件的卸载前
    // vue组件销毁前和销毁后的生命周期
    // 应用场景： 移除一些插件配置，移除一些公共事件绑定
    // 如 scroll 等  也可以像其他组件传参
    
    console.log("//vue组件的卸载前")
  },
  destroyed() { //vue组件的卸载后
     console.log("//vue组件的卸载后")
  },
  methods: {
    change(){
      this.msg="明天星期六"
    },
    say(){
      this.num++
    }
  },
};
</script>
<style lang="less" scoped>
  #boxs{
    width:200px;
    height:200px;
    background:red;
  }
</style>